<template>
  <el-tabs type="border-card" v-model="tabNames[tabName]" @tab-click="onUpdateTab">
    <el-tab-pane :label="title" name="tab-0">
      <div class="edit-handles-con">
        <el-collapse v-model="eventTabs">
          <el-collapse-item title="通用属性" name="cmmmon">
            <el-form class="margin-bottom-10">
              <input-normal label="组件类型" v-model="componentData.type" disabled="disabled"></input-normal>
              <input-normal label="组件id" v-model="getComId.id" @change="onChangeAttrId"></input-normal>
              <switch-normal v-model="commonAttr.isVisible" label="可见" @change="onChangeAttr"></switch-normal>
              <dropdown-normal label="定位类型" :valLists="POSITION_TYPES" v-model="commonAttr.positionType" @change="onChangeAttr"></dropdown-normal>
              <switch-normal v-model="commonAttr.isBottom" label="距离底部" @change="onChangeAttr"></switch-normal>
              <switch-normal v-model="commonAttr.isRight" label="距离右边" @change="onChangeAttr"></switch-normal>
              <input-normal v-if="commonAttr.isRight" label="距离右边距离" v-model="commonAttr.right" @change="onChangeAttr"></input-normal>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="组件属性" name="comp">
            <slot></slot>
            <el-form>
              <el-divider content-position="center">共有属性</el-divider>
              <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
              <dropdown-normal v-if="commonAttr.isFullScreen" label="页面缩放类型" :valLists="RESIZE_TYPE" v-model="commonAttr.resizeType" @change="onChangeAttr"></dropdown-normal>
              <!-- <switch-normal v-if="isHasOwnProperty(commonAttr, 'isPageCanvas')" v-model="commonAttr.isPageCanvas" label="页面级canvas" @change="onChangeAttr"></switch-normal> -->
              <div v-if="isPixi">
                <input-normal label="设计宽度" v-model="commonAttr.designWidth" @change="onChangeAttr"></input-normal>
                <input-normal label="设计高度" v-model="commonAttr.designHeight" @change="onChangeAttr"></input-normal>
                <switch-normal v-if="isHasOwnProperty(commonAttr, 'isFilter')" v-model="commonAttr.isFilter" label="滤镜" @change="onChangeAttr"></switch-normal>
                <div v-if="commonAttr.isFilter">
                  <dropdown-normal v-if="commonAttr.isFilter" label="滤镜类型" :valLists="PIXI_FILTERS" v-model="commonAttr.filterType" @change="onChangeFilterType"></dropdown-normal>
                  <div v-for="(item, name, index) in filterData && filterData.attrs" :key="index">
                    <div v-if="isHasOwnProperty(item, 'x') || name == 'matrixs'">
                      <component v-for="(item_, name_, index_) in item" :key="'xy_' + index_" :is="item_.type" 
                        v-model="item_.value" :label="name + '.' + name_" :min="item_.min" :max="getMax(item_)" :step="item_.step" @change="onChangeFilterValues"></component>
                    </div>
                    <div v-else>
                      <component v-if="item.type === 'SliderNormal'" :is="item.type" 
                        v-model="item.value" :label="name" :min="item.min" :max="getMax(item)" :step="item.step" @change="onChangeFilterValues"></component>
                      <component v-else-if="item.type === 'InputNormal'" :is="item.type" 
                        v-model="item.value" :label="name" @change="onChangeFilterValues"></component>
                      <component v-else-if="item.type === 'ColorNormal'" :is="item.type" 
                        v-model="item.value" :label="name" @change="onChangeFilterValues"></component>
                      <component v-else-if="item.type === 'SwitchNormal'" :is="item.type" 
                        v-model="item.value" :label="name" @change="onChangeFilterValues"></component>
                      <component v-else-if="item.type === 'AddImgCon'" :is="item.type" 
                        :url="item.value" comAttr="commonAttr" picAttr="url" :isCrop="true" :isDelete="true" class="margin-left-right-16" @change="onChangeFilterValues"></component>
                      <component v-else-if="item.type === 'DropdownNormal'" :is="item.type" 
                        v-model="item.value" :valLists="item.list" :label="name" @change="onChangeFilterValues"></component>
                    </div>
                  </div>
                </div>
                <switch-normal v-if="isHasOwnProperty(commonAttr, 'isAnimate')" v-model="commonAttr.isAnimate" label="动画" @change="onChangeAttr"></switch-normal>
                <dropdown-normal v-if="commonAttr.isAnimate" label="动画类型" :valLists="PIXI_ANIMATE_TYPE" v-model="commonAttr.animateType" @change="onChangeAttr"></dropdown-normal>
              </div>
              <color-normal v-model="commonAttr.backgroundColor" label="背景色" format="rgb" @change="onChangeAttr"></color-normal>
            </el-form>
          </el-collapse-item>
          <right-position></right-position>
        </el-collapse>
      </div>
    </el-tab-pane>
    <el-tab-pane label="动画" name="tab-1">
      <div class="edit-handles-con">
        <right-animate></right-animate>
      </div>
    </el-tab-pane>
    <el-tab-pane label="事件" name="tab-2">
      <div class="edit-handles-con">
        <right-events></right-events>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import RightEvents from '@/views/child/right/right-events.vue'
import RightPosition from '@/views/child/right/right-position.vue'
import RightAnimate from '@/views/child/right/right-animate.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import SliderNormal from '@/views/components/edit/SliderNormal.vue'
import ColorNormal from '@/views/components/edit/ColorNormal.vue'
import AddImgCon from '@/views/components/add-img-con.vue'

import { canvasUtils } from '@/views/js/canvas-utils'
import { RESIZE_TYPE, PIXI_FILTERS, PIXI_FILTERS_MAP, PIXI_ANIMATE_TYPE } from '@/common/const-canvas';
import { PIXI_CID, THREE_CID }  from '@/common/const-wb'

export default {
  name: 'RightCanvasTemplate',
  mixins: [canvasUtils],
  setup () {
    return {
      RESIZE_TYPE: RESIZE_TYPE,
      PIXI_FILTERS: PIXI_FILTERS,
      PIXI_ANIMATE_TYPE: PIXI_ANIMATE_TYPE,
    }
  },
  components: {
    RightEvents,
    RightPosition,
    RightAnimate,
    InputNormal,
    DropdownNormal,
    SwitchNormal,
    ColorNormal,
    SliderNormal,
    AddImgCon,
  },
  computed: {
    isPixi(){
      return this.componentData.cid >= PIXI_CID && this.componentData.cid < THREE_CID
    },
    filterData(){
      const filterType = this.commonAttr.filterType;
       if(filterType && filterType.length > 0){
        const filterData = _.cloneDeep(this.componentData.filters[filterType]);
        return filterData
       }
       return {};
    }
  },
  methods: {
    onChangeFilterType(){
      this.updateCurrentComponentData({commonAttr:this.commonAttr});

      const filterType = this.commonAttr.filterType;
      if(filterType && filterType.length > 0){
        const filterData = _.cloneDeep(PIXI_FILTERS_MAP[filterType]);
        let filters = {};
        filters[filterType] = filterData;
        this.$store.commit('components/updateCurrentComponentDataFilters', {filters})
      }
    },
    onChangeFilterValues(){
      const filterType = this.commonAttr.filterType;
      let filters = {};
      filters[filterType] = this.filterData;
      this.$store.commit('components/updateCurrentComponentDataFilters', {filters});
    },
    getMax(item){
      let max = item.max;
      if(item.max == "width"){
        max = this.componentData.conAttr.width;
      }else if(item.max == "width/2"){
        max = this.componentData.conAttr.width/2;
      }else if(item.max == "height"){
        max = this.componentData.conAttr.height;
      }else if(item.max == "height/2"){
        max = this.componentData.conAttr.height/2;
      }
      return max;
    }
  }
}
</script>

